<template>
  <ContainerGroup>
    <Container height="fill" style="margin-top: 0">
      <div class="btn-box">
        <Button style="margin-right: 12px" @click="handlePrint">打印</Button>
        <Button @click="handleDownload">下载</Button>
      </div>
      <div class="certificate-box">
        <div id="printContent" ref="printContent" class="certificate">
          <p class="title">苏州大学附属第二医院</p>
          <p class="title">住院证</p>
          <p class="mark">{{ patientType }}</p>
          <div class="bar-code">
            <barcode :value="barCodeValue" :options="barCodeOption">
              条形码加载失败
            </barcode>
          </div>
          <div class="main">
            <div class="left-box">
              <div>
                <div class="line first-line">
                  <a>急</a>
                  <div class="check-square">
                    <i
                      class="el-icon-check"
                      :class="{
                        checkboxchecked: patientInfo.ifEmergency === '1',
                      }"
                    />
                  </div>
                  <a>平（步行</a>
                  <div class="check-square">
                    <i
                      class="el-icon-check"
                      :class="{ checkboxchecked: patientInfo.ifWalk === '1' }"
                    />
                  </div>
                  <a>、抬椅</a>
                  <div class="check-square">
                    <i
                      class="el-icon-check"
                      :class="{ checkboxchecked: patientInfo.ifChair === '1' }"
                    />
                  </div>
                  <a>、病车</a>
                  <div class="check-square">
                    <i
                      class="el-icon-check"
                      :class="{
                        checkboxchecked: patientInfo.ifAmbulance === '1',
                      }"
                    />
                  </div>
                  <a>)</a>
                </div>
                <div class="line second-line">
                  <a>住院科别</a>
                  <div>{{ patientInfo.deptName }}</div>
                  <a>病区</a>
                  <div>{{ patientInfo.nurseCellName }}</div>
                  <a>床号</a>
                  <div>{{ patientInfo.bedNo }}</div>
                </div>
                <div class="line second-line-ss">
                  <a>专业组</a>
                  <div class="zu-list">{{ patientInfo.medicalGroupName }}</div>
                  <a>医疗组长</a>
                  <div class="zu-zhang">{{ patientInfo.medicalGroupLeaderName }}</div>
                </div>
                <div class="line third-line">
                  <a>病人姓名</a>
                  <div>{{ patientInfo.name }}</div>
                  <a>性别</a>
                  <div>{{ patientInfo.sex === "1" ? "男" : "女" }}</div>
                  <a>年龄</a>
                  <div>{{ patientInfo.age }}</div>
                  <a>职业</a>
                  <div>{{ patientInfo.profCode }}</div>
                  <a>籍贯</a>
                  <div>{{ patientInfo.dist }}</div>
                </div>
                <div class="line forth-line">
                  <a>初步诊断</a>
                  <div>{{ patientInfo.diagName }}</div>
                </div>
                <div class="line forth-line">
                  <a>描述诊断</a>
                  <div>{{ patientInfo.mszd }}</div>
                </div>
                <div class="line fifth-line">
                  <div class="left-part">
                    <a>需要预交住院费</a>
                    <a>{{ patientInfo.prepayCost }}</a>
                    <a>元</a>
                  </div>
                  <div class="right-part" style="flex: 1">
                    <a>自费</a>
                    <div class="check-square">
                      <i
                        class="el-icon-check"
                        :class="{
                          checkboxchecked: patientInfo.paykindCode === '01',
                        }"
                      />
                    </div>
                    <a>、参保</a>
                    <div class="check-square">
                      <i
                        class="el-icon-check"
                        :class="{
                          checkboxchecked: patientInfo.paykindCode === '02',
                        }"
                      />
                    </div>
                    <a>、其他</a>
                    <div
                      style="
                            border: none;
                            border-bottom: 1px solid #333;
                            flex: 1;
                          "
                    />
                  </div>
                </div>
                <div
                  class="line sixth-line"
                  style="justify-content: space-between"
                >
                  <div style="display: flex">
                    <a>是否31日内非计划再次入院</a>
                    <div class="check-square">
                      <i
                        class="el-icon-check"
                        :class="{
                          checkboxchecked: patientInfo.ifInhosPlan === '1',
                        }"
                      />
                    </div>
                  </div>
                  <div style="display: flex">
                    <a>是否外伤入院</a>
                    <div class="check-square">
                      <i
                        class="el-icon-check"
                        :class="{
                          checkboxchecked: patientInfo.ifInhosExternal === '1',
                        }"
                      />
                    </div>
                  </div>
                  <div style="display: flex">
                    <a>是否日间手术</a>
                    <div class="check-square">
                      <i
                        class="el-icon-check"
                        :class="{ checkboxchecked: patientInfo.ifRjbf === '1' }"
                      />
                    </div>
                  </div>
                </div>
                <div class="line forth-line">
                  <a>入院医嘱</a>
                  <div />
                </div>
                <div class="line forth-line">
                  <a>备注</a>
                  <div>{{ patientInfo.beizhu }}</div>
                </div>
                <div
                  class="line seventh-line"
                  style="justify-content: space-between"
                >
                  <div class="seven-left" style="display: flex; flex: 1.5">
                    <a>日期</a>
                    <div style="flex: 1; border-bottom: 1px solid #333">
                      {{ patientInfo.predate }}
                    </div>
                  </div>
                  <div class="seventh-right" style="display: flex; flex: 1">
                    <a>医师</a>
                    <div
                      style="flex: 1; border-bottom: 1px solid #333; margin: 0"
                    >
                      {{ patientInfo.doctName }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right-box">
              <div class="line forth-line">
                <a>门诊号</a>
                <div>{{ patientInfo.cardNo }}</div>
              </div>
              <div class="line forth-line">
                <a>处方号</a>
                <div>{{ patientInfo.clinicCode }}</div>
              </div>
              <div class="line forth-line">
                <a>入院日期</a>
                <div>{{ patientInfo.ryTime }}</div>
              </div>
              <div class="line forth-line">
                <a>现地址</a>
                <div>{{ patientInfo.home }}</div>
              </div>
              <div class="line forth-line">
                <a>电话</a>
                <div>{{ patientInfo.homeTel }}</div>
              </div>
              <div class="line forth-line">
                <a>身份证号</a>
                <div>{{ patientInfo.idenno }}</div>
              </div>
              <div class="line forth-line">
                <a>工作单位</a>
                <div>{{ patientInfo.workName }}</div>
              </div>
              <div class="line forth-line">
                <a>联系人</a>
                <div>{{ patientInfo.linkmaName }}</div>
              </div>
              <div
                class="line seventh-line"
                style="justify-content: space-between"
              >
                <div class="seven-left" style="display: flex; flex: 1">
                  <a>关系</a>
                  <div style="flex: 1; border-bottom: 1px solid #333">
                    {{ patientInfo.relaCode }}
                  </div>
                </div>
                <div class="seventh-right" style="display: flex; flex: 1.5">
                  <a>电话</a>
                  <div
                    style="flex: 1; border-bottom: 1px solid #333; margin: 0"
                  >
                    {{ patientInfo.linkmanTel }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Container>
  </ContainerGroup>
</template>

<script>
import html2canvas from 'html2canvas'
import printJS from 'print-js'
import { getPrintHospitalCertificate } from '../../utils/apis/InpatientRegistration.js'

export default {
  name: 'Certificate',
  components: {},
  data() {
    return {
      form: {
        type: ''
      },
      patientInfo: { 'patientTag': '' },
      preid: '',
      idCard: '',
      deptCode: '',
      barCodeValue: '45836',
      barCodeOption: {
        height: 30
      }
    }
  },
  computed: {
    patientType() {
      let result = '普通患者'
      if (this.patientInfo.patientTag === '1') {
        result = '日间手术'
      } else if (this.patientInfo.patientTag === '2') {
        result = '院前准备'
      } else if (this.patientInfo.patientTag === '4') {
        result = '日间输注'
      } else {

      }
      return result
    }
  },
  created() {
    this.preid = ''
    this.idCard = ''
    this.deptCode = ''
    this.preid = this.$route.query.preid
    this.idCard = this.$route.query.idCard
    this.deptCode = this.$route.query.deptCode
    this._getPrintHospitalCertificate()
  },
  mounted() {},
  methods: {
    _getPrintHospitalCertificate() {
      const params = {
        preid: this.preid,
        idCard: this.idCard,
        deptCode: this.deptCode
      }
      getPrintHospitalCertificate(params).then((res) => {
        if (res.data.code === 200) {
          if (res.data.data.outpatient.length > 0) {
            this.patientInfo = res.data.data.outpatient[0]
            this.barCodeValue = res.data.data.outpatient[0].preid
          } else {
            this.patientInfo = []
            this.barCodeValue = '45836'
          }
        }
      })
    },
    handlePrint() {
      html2canvas(document.getElementById('printContent'), {
        useCORS: true,
        logging: true
      }).then((canvas) => {
        const url = canvas.toDataURL()
        printJS({
          printable: url,
          type: 'image',
          documentTitle: `${this.patientInfo.name}住院证`
        })
      })
    },
    handleDownload() {
      html2canvas(document.getElementById('printContent'), {
        useCORS: true,
        logging: true
      }).then((canvas) => {
        canvas.toBlob((blob) => {
          const url = window.URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', `${this.patientInfo.name}住院证`)
          document.body.appendChild(link)
          link.click()
        }, 'image/png')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.btn-box {
  display: flex;
  padding-bottom: 12px;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 12px;
}
.certificate-box {
  width: 100%;
  .certificate {
    border: 1px dashed #ccc;
    margin: 0 auto;
    height: 600px;
    width: 919px;
    padding: 8px;
    text-align: center;
    position: relative;
    .title {
      margin: 12px 0;
      font-size: 28px;
      letter-spacing: 8px;
    }
    .mark {
      position: absolute;
      left: 8px;
      top: 78px;
    }
    .bar-code {
      position: absolute;
      right: 0;
      top: 38px;
    }
    .main {
      margin-top: 28px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      .left-box {
        padding: 8px;
        width: 64%;
        height: 100%;
        border-right: 1px solid #000;
      }
      .right-box {
        padding: 8px;
        width: 36%;
        height: 100%;
        .line {
          margin-bottom: 30.5px;
        }
      }
    }
    .line {
      margin-bottom: 24px;
      display: flex;
      a,
      div {
        margin-right: 8px;
      }
      .left-part,
      .right-part {
        a,
        div {
          margin-right: 8px;
        }
      }
      .left-part {
        margin-right: 20px;
      }
      .right-part {
        display: flex;
      }
    }
    .first-line {
      display: flex;
      a,
      div {
        margin-right: 8px;
      }
    }
    .second-line,
    .third-line,
    .forth-line {
      div {
        flex: 1;
        border-bottom: 1px solid #333;
      }
    }
    .second-line-ss {
      div {
        border-bottom: 1px solid #333;
      }
    }
    .zu-list {
      width: 55%;
    }
    .zu-zhang {
      width: 20%;
    }
    .third-line {
      div:last-of-type {
        flex: 2;
      }
    }
    .check-square {
      box-sizing: border-box;
      height: 22px;
      width: 22px;
      border: 1px solid #333;
      border-radius: 3px;
    }
  }
}
.checkboxchecked {
  color: #333 !important;
}
/deep/ .el-icon-check {
  color: #fff;
}
</style>
